<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/zepto.min.js"></script>
    <script src="./js/touch.js"></script>
    <title>Document</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
    }
#list li{list-style-type: none;line-height: 40px;border-bottom:1px red solid;padding-left: 20px;height: 40px;}
.del{float: right;background-color: red;display: none;padding-left: 0 20px;}
</style>
<body>
<div class="wrap">
  <div id="list">
      <li><a href="#">洗衣机</a><span class="del">删除</span></li>
      <li><a href="#">电冰箱</a><span class="del">删除</span></li>
      <li><a href="#">电磁炉</a><span class="del">删除</span></li>
      <li><a href="#">电视机</a><span class="del">删除</span></li>
      <li><a href="#">电风扇</a><span class="del">删除</span></li>
  </div>
</div>
  </div>
</body>
<script>
  $("#list li").swipeLeft(function(){
    $('.del').hide();
    $(this).children().show();
  })
  $("#list li").swipeRight(function(){
    $('.del').hide(); 
  })
</script>
</html>